<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/png" href="st/og-image.png">
    <title>SortableJS</title>

    <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap-theme.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="st/theme.css">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta property="og:image" content="/st/og-image.png"/>
    <meta name="keywords" content="sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, dnd, sortableJS"/>
    <meta name="description" content="Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap."/>
    <meta name="viewport" content="width=device-width, initial-scale=0.5"/>
</head>
<body>
<div class="container">
    <div id="sorting-disabled" class="row">
        <div id="getRows" class="sortable" class="list-group sortable" style="width: 100px;float:left;">
            <div class="list-group-item"><span class="tu" style="display: block"><i class="	glyphicon glyphicon-th-list"></i> 轮播图</span><span class="moban" style="display: none">模板1</span></div>
            <div class="list-group-item"><span class="tu" style="display: block"><i class="	glyphicon glyphicon-th-list"></i> 图</span><span class="moban" style="display: none">模板2</span></div>
            <div class="list-group-item"><span class="tu" style="display: block"><i class="	glyphicon glyphicon-th-list"></i> 表单</span><span class="moban" style="display: none">模板3</span></div>
            <div class="list-group-item"><span class="tu" style="display: block"><i class="	glyphicon glyphicon-th-list"></i> 客服</span><span class="moban" style="display: none">模板4</span></div>

        </div>

        <div id="wqe" class="list-group" style="width: 900px;float:left;">
            <div class="list-group-item">轮播图</div>
            <div class="list-group-item">图</div>
            <div class="list-group-item">表单</div>
            <div class="list-group-item">客服</div>
        </div>
    </div>
</div>

<!-- Latest Sortable -->

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    // 交换位置和移动位置
    function swapArray(arr, indexStart, indexEnd) {
        //index 是当前元素 ，
        // 交换位置 一
        // let temp = array[indexStart];
        // array[indexStart] = array[indexEnd];
        // array[indexEnd] = temp;
        // 交换位置 二

        // arr[indexStart] = arr.splice(indexEnd, 1, arr[indexStart])[0];
        // return arr;
        // 位置的移动
        //如果当前元素在拖动目标位置的下方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置的地方新增一个和当前元素值一样的元素，
        //我们再把数组之前的那个拖动的元素删除掉，所以要len+1
        if(indexStart>indexEnd){
            arr.splice(indexEnd,0,arr[indexStart]);
            arr.splice(indexStart+1,1)
        }
        else{
            //如果当前元素在拖动目标位置的上方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置+1的地方新增一个和当前元素值一样的元素，
            //这时，数组len不变，我们再把数组之前的那个拖动的元素删除掉，下标还是index
            arr.splice(indexEnd+1,0,arr[indexStart]);
            arr.splice(indexStart,1)
        }
    }

    // new Sortable(example4Left, {
    // 	group: {
    // 		name: 'shared',
    // 		pull: 'clone',
    // 		put: true // Do not allow items to be put into this list
    // 	},
    // 	animation: 150,
    // 	sort: true,// To disable sorting: set sort to false
    // 	onStart: function (/**Event*/evt) { // 拖拽开始
    // 		//所在位置
    // 		indexStart = $(evt.item).parent().children().index($(evt.item));
    // 	},
    // 	onEnd: function (e) { // 拖拽结束el
    // 		var indexEnd = $(e.item).parent().children().index($(e.item));
    // 		console.log(indexStart)
    // 		console.log(indexEnd)
    // 		let arr = $("#wqe").find(".list-group-item");
    // 		console.log(arr[0])
    // 		// 交换第三个和第四个元素
    // 		swapArr(arr,indexStart,indexEnd)
    // 		$("#wqe").html(arr)
    // 	}
    //
    // });

    $(document).ready(function(){
//tr上下拖动
        $(".sortable").sortable({
            cursor: "move",
            items: $("#getRows .list-group-item"),                       //只是tr可以拖动  
            opacity: 1.0,                      //拖动时，透明度为0.6  
            revert: true,                      //释放时，增加动画  
            update: function(event, ui) {      //更新排序之后  
                var indexEnd =$(ui.item).index();
                console.log(indexEnd)
                let arr = $("#wqe").find(".list-group-item");
                // 交换第三个和第四个元素
                swapArray(arr,indexStart,indexEnd)
                console.log(arr)

                $("#wqe").html(arr)
                // $("#getRows").html(getRowsA)
            },
            start: function (/**Event*/evt,ui) { // 拖拽开始
                //所在位置
                indexStart = $(ui.item).index();
                console.log(indexStart)
            },
            stop: function (e,ui) { // 拖拽结束el

            }
        });

    });



    // new Sortable(example4Right, {
    // 	group: 'shared',
    // 	animation: 150
    // });
    //


</script>
</body>
</html>
